
<template>
  <section class="todoapp">
    <Header @add-todo="babaAddFn" />
    <Main :arr="showlist" @del-todo="babaDelFn" />
    <Footer v-if="list.length" :arr="list" @switch-todo="babaSwitchFn" @clear-todo="babaClearFn"/>
  </section>
</template>

<script>
import "./assets/css/base.css";
import "./assets/css/index.css";
import Header from "./components/Header.vue";
import Main from "./components/Main.vue";
import Footer from "./components/Footer.vue";
export default {
    watch:{
        list:{
            deep:true,
            handler(newVal){
localStorage.setItem("list",JSON.stringify(newVal))
            }
        }
    },
    computed: {
        showlist(){
            if(this.babaType =="all"){
                return this.list
            }else if(this.babaType =="no"){
                return this.list.filter(item => item.isDone===false)
            }else{
                return this.list.filter(item => item.isDone===true)
            }
        }
    },
  methods: {
    babaAddFn(name) {
      const obj = {
        id: Date.now(), //时间戳代替id值
        name,
        isDone: false, //默认添加的事项是未完成状态
      };
      this.list.push(obj);
    },
    babaDelFn(index) {
      this.list.splice(index, 1);
    },
    babaSwitchFn(switchType) {
      this.babaType = switchType;
    },
    babaClearFn(){
        this.list=this.list.filter(item =>item.isDone==false)
    }
  },
  data() {
    return {
      babaType: "all",
      list: 
  JSON.parse(localStorage.getItem("list")) ||
      [
        { id: 100, name: "吃饭", isDone: true },
        { id: 201, name: "睡觉", isDone: false },
        { id: 103, name: "打豆豆", isDone: true },
      ],
    };
  },
  components: {
    Header,
    Main,
    Footer,
  },
};
</script>

<style>
</style>